<template>
    <div class="form-manage" v-if="show_show">

        <!--S内容-->
        <div id="form-manage" class="louie-selector" :class="selector_class">

            <!--S标题-->
            <h2>
                <span>表单管理</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="toggle(false)"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S添加表单-->
            <div id="add-button">
                <cube-button @click="showEdit">添加表单</cube-button>
            </div>
            <!--E添加表单-->

            <!--S推广链接列表-->
            <div id="list" v-if="list.data.length > 0">
                <cube-scroll
                        ref="scroll"
                        :options="scroll_option"
                        @pulling-up="upLoad"
                        @pulling-down="downRefresh"
                >

                    <ul>
                        <li v-for="(item,index) in list.data"
                            :key="item.id"
                            @click="showSheet(index)"
                        >
                            {{item.form_name}}
                        </li>
                    </ul>

                </cube-scroll>
            </div>
            <empty v-else>暂无表单</empty>
            <!--E推广链接列表-->

        </div>
        <!--E内容-->

        <!--S编辑弹窗-->
        <edit :show="edit.show"
              :form_id="edit.form_id"
              @close="edit.show = false"
              @success="editSuccess"
        >
        </edit>
        <!--E编辑弹窗-->

        <!--S查看表单内容-->
        <watch :show="watch.show"
               :form_id="watch.form_id"
               @close="watch.show = false"
        >
        </watch>
        <!--S查看表单内容-->

    </div>
</template>

<script>
import Edit from './components/edit'
import Empty from '../../components/empty'
import Watch from './components/watch'
export default {
    name: "form-manage",
    data() {
        return {
            // 显示状态
            show_show: false,
            // 素材库class
            selector_class: 'close',
            // 编辑弹窗数据
            edit: {
                show: false,
                form_id: 0
            },
            // 查看表单内容相关组件
            watch: {
              show: false,
              form_id: 0
            },
            // 滚动条配置
            scroll_option: {
                scrollbar:true,
                pullUpLoad:{
                    txt:{
                        more:"上拉加载",
                        noMore:"----我也是有底线的----"
                    }
                },
                pullDownRefresh: {
                    threshold: 60,
                    stop: 40,
                    txt: '更新成功'
                }
            },
            // 数据列表
            list: {
                loading: false,
                data: [],
                limit: [0,20]
            },
            // 编辑操作的下标
            handle_index: 0
        }
    },
    props: {
        is_show: {
            type: Number || Boolean
        },
        // 是否选择
        select: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        // 组件显示状态
        is_show() {
            this.toggle(true)
        }
    },
    components: {
        Edit,
        Watch,
        Empty
    },
    mounted() {
        this.toggle(true)
        this.getList()
    },
    methods: {
        /**
         * 显示隐藏本组件
         */
        toggle(is_show) {
            if(is_show) {
                this.show_show = true
                setTimeout(() => {
                    this.selector_class = 'show'
                },100)
            } else {
                this.selector_class = 'close'
                setTimeout(() => {
                    this.show_show = false
                },200)
            }
        },
        /**
         * 显示添加编辑表单
         */
        showEdit() {
            this.edit = {
                show: true,
                form_id: 0
            }
        },
        /**
         * 添加编辑成功
         */
        editSuccess(form_id) {
            this.edit.form_id = parseInt(form_id)
            if(this.list.data.length <= 0) {
                this.downRefresh()
            }
        },
        /**
         * 获取列表
         */
        getList(){
            if(this.list.loading) return true
            this.list.loading = true
            return this.$get("form/getUserAll",{
                limit: this.list.limit
            })
                .then((res) => {
                    this.list.loading = false
                    let {code, data} = res.data
                    if(code === 0) {
                        this.list.data.push(...data)
                        this.list.limit[0] += this.list.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false);
                    } else {
                        if(this.list.data.length > this.list.limit[1]){
                            this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                        } else {
                            this.scroll_option.pullUpLoad = false;
                            this.$refs.scroll && this.$refs.scroll.refresh();
                        }
                    }
                });
        },
        /**
         * 上拉加载
         */
        upLoad() {
            this.getList()
        },
        /**
         * 下拉刷新
         */
        downRefresh() {
            this.list.limit = [0,20]
            setTimeout(() => {
                this.list.data = []
                this.getList()
            },1500)
        },
        /**
         * 显示操作面板
         */
        showSheet(index) {
            this.handle_index = index
            let sheet_data = [
                {
                    content: '查看',
                    value: 'watch'
                },
                {
                    content: '修改',
                    value: 'edit'
                },
                {
                    content: `<span style="color:red;">删除</span>`,
                    value: 'delete'
                }
            ];
            if(this.select){
                sheet_data.unshift({
                    content: '选择',
                    value: 'select'
                })
            }
            this.$createActionSheet({
                title: '操作',
                data: sheet_data,
                zIndex: 10000,
                onSelect: (item) => {
                    switch(item.value) {
                        case 'select':
                            this.confirm()
                            break;
                        case 'watch':
                            this.watchForm()
                            break;
                        case 'edit':
                            this.update()
                            break;
                        case 'delete':
                            this.delete()
                            break;
                    }
                }
            }).show()
        },
        /**
         * 修改
         */
        update() {
            let data = this.list.data[this.handle_index]
            this.edit = {
                show: true,
                form_id: parseInt(data.id)
            }
        },
        /**
         * 删除
         */
        delete() {
            let data = this.list.data[this.handle_index]
            this.$post('form/del',{
                form_id: data.id
            })
                .then((res) => {
                    if(!res.data.code) {
                        this.list.data.splice(this.handle_index,1)
                    } else {
                        this.$createToast({
                            txt: '操作失败',
                            time: 1000,
                            type: 'error',
                            zIndex: 1000
                        }).show()
                    }
                })
        },
        /**
         * 查看表单内容
         */
        watchForm(){
            let data = this.list.data[this.handle_index]
            this.watch = {
                show: true,
                form_id: parseInt(data.id)
            }
        },
        /**
         * 确认选择
         */
        confirm() {
            this.$emit("confirm",this.list.data[this.handle_index].id)
            this.toggle(false)
        }
    }
}
</script>

<style scoped lang="less" src="./form-manage.less"></style>